<template>
  <div class="home-banner"><Slider :data="list" /></div>
</template>

<script>
import { findBanner } from '@/api/home'
import { ref, onMounted } from 'vue'

const userSlider = () => {
  /**
     * 1.定义列表数据变量
     * 2.定义获取轮播图数据的方法
     * 3.在组件挂载之后发请求
     */
  const list = ref([])
  const getList = async () => {
    const { result } = await findBanner()
    // console.log(22, result)
    list.value = result
  }
  onMounted(() => {
    getList()
  })
  return { list }
}
export default {
  name: 'HomeBanner',
  setup () {
    const { list } = userSlider()
    return { list }
  }
}
</script>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
